<template>
  <el-card class="skuCard" shadow="always" :body-style="{ padding: '20px' }">
    <!-- 表格 -->
    <el-table border stripe :data="skuList">
      <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片">
        <template v-slot="{ row, $index }">
          <img :src="row.skuDefaultImg" style="width: 100px; height: 60px;">
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="操作" align="center" width="250px">
        <template v-slot="{ row, $index }">
          <el-button v-if="row.isSale" type="success" size="small" icon="ele-Top" @click="cancelSale(row)" title="下架"></el-button>
          <el-button v-else type="info" size="small" icon="ele-Bottom" @click="onSale(row)" title="上架"></el-button>
          <el-button type="primary" size="small" icon="ele-Edit" @click="updateSku(row)" title="修改"></el-button>
          <el-button type="info" size="small" icon="ele-InfoFilled" @click="showSkuInfo(row)" title="查看详情"></el-button>
          <el-button type="danger" size="small" icon="ele-Delete" @click="deleteSku(row)" title="删除sku"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination 
    @current-change="getSkuList" 
    style="margin-top:20px"
    v-model:current-page="page" 
    v-model:page-size="limit" 
    :total="total" 
    layout=" prev, pager, next, jumper," />

    <!-- 抽屉 -->
    <el-drawer v-model="drawer" :with-header="false" size="50%">
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">名称</el-col>
        <el-col :span="16" :offset="0">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">描述</el-col>
        <el-col :span="16" :offset="0">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">价格</el-col>
        <el-col :span="16" :offset="0">{{ skuInfo.price }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">平台属性</el-col>
        <el-col :span="16" :offset="0">
          <el-tag type="danger" v-for="(attrValue,index) in skuInfo.skuAttrValueList" :kye="attrValue.id">{{ attrValue.valueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">销售属性</el-col>
        <el-col :span="16" :offset="0">
          <el-tag type="danger" v-for="(saleAttrValue,index) in skuInfo.skuSaleAttrValueList" :key="saleAttrValue.id">{{ saleAttrValue.saleAttrValueName }}</el-tag>
          
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">商品图片</el-col>
        <el-col :span="16" :offset="0">
          <!-- 走马灯组件只有height属性没有width属性,如果你想控制轮播图的宽度，得自己写样式 -->
          <!-- trigger="click" 点击下方进行切换，不写默认放在上面切换 -->
          <el-carousel trigger="click" height="400px" type="default" v-if="skuInfo.skuImageList.length">
            <el-carousel-item v-for="(skuImg,index) in skuInfo.skuImageList" :key="skuImg.id">
              <img :src="skuImg.imgUrl">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
      
    </el-drawer>
  </el-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Sku'
})
</script>
<script lang="ts" setup>
// 引入api 数据类型
import skuApi, { type SkuData } from '@/api/sku'
import { ElMessage } from 'element-plus';
// 引入 onMounted
import { onMounted, ref } from 'vue'

/* 定义初始化分页数据 */
const page = ref(1)   // 当前页码
const limit = ref(3)  // 每页展示数量
const total = ref(0)  // 总数
// 把获取到的数据保存起来
const skuList = ref<SkuData[]>([])
// 定义初始化数据发送请求的函数
const getSkuList = async (num = 20) => {
  page.value = num
  // 获取sku的分页列表s
  // http://39.98.123.211:8510/admin/product/list/{page}/{limit}
  try {
    const res = await skuApi.getPageList(page.value, limit.value)
    // console.log(res);
    // 把获取到的数据保存起来
    skuList.value = res.records
    // 分页数据总数保存起来
    total.value = res.total
  } catch (error) {
    ElMessage.error('获取sku分页列表失败')
  }
}
// 页面挂载完成立即执行
onMounted(() => {
  getSkuList()
})

// 下架逻辑
const cancelSale = async (row: SkuData) => {
  // 传参发请求
  await skuApi.cancelSale(row.id as number)
  // 成功的逻辑
  ElMessage.success('下架商品成功')
  // 刷新页面
  getSkuList(page.value)
}
// 上架逻辑
const onSale = async (row: SkuData) => {
  // 传参发请求
  await skuApi.onSale(row.id as number)
  // 成功的逻辑
  ElMessage.success('上架商品成功')
  // 刷新页面
  getSkuList(page.value)
}

// 修改逻辑--正在开发中！！！！
const updateSku = (row: SkuData) => {
  ElMessage.info('正在开发中！！！！')
}

// 删除逻辑
const deleteSku = async (row: SkuData) => {
  // 传参发请求
  await skuApi.deleteSku(row.id as number)
  // 成功的逻辑
  ElMessage.success('删除商品成功')
  // 刷新页面
  getSkuList(page.value)
}

// 定义抽屉初始值
const drawer = ref(false)
// 定义请求发送成功保存的值
const skuInfo = ref<SkuData>({
  spuId: 0,
  price: 0,
  skuName: '',
  skuDesc: '',
  weight: '',
  tmId: 0,
  category3Id: 0,
  skuDefaultImg: '',
  isSale: 0,
  createTime: '',
  skuImageList: [],
  skuAttrValueList: [],
  skuSaleAttrValueList: []
})
// 点击查看详情逻辑
// row就是点击的sku的数据，但是它是从列表页来的，数据不是详情信息,
// 需要根据它的id再次发请求才能拿到sku的详情信息
const showSkuInfo = async (row:SkuData) => {
  drawer.value = true
  // 发请求前清空数据，轮播图就可以展示了
  try {
    // 传入参数发送请求
    const res = await skuApi.getById(row.id as number)
    // console.log(res);
    // 把请求发送成功的数据存到本地，以便进行渲染
    skuInfo.value = res
  } catch (error) {
    ElMessage.error('获取sku详情信息失败')
  }
}
</script>


<style lang="scss" scoped>
.el-row {
  // 控制抽屉每行的样式
  height: 40px;
  line-height: 40px;  
  .el-col-6 {
    font-size: 20px;
    font-weight: bold;
    text-align: right;
  }

  // 
  .el-col-16 {
    /* 必须是块级元素 */

    // white-space是规定段落中的文本不进行换行的属性
    white-space: nowrap;
    // 溢出隐藏
    overflow: hidden;
    // 文本超长的打点省略
    text-overflow: ellipsis;
  }
}

// 控制走马灯的样式
.el-carousel{
  // 控制外层的宽度
  width: 400px;
  // 控制里面的图片大小
  img{
    width: 400px;
    height: 400px;
  }
}
:deep(.el-carousel__indicator){
  button{
    // 把按钮变为行内块
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    // 所有圆点的背景色
    background-color: rgb(107, 102, 105);
  }
  &.is-active{
    // 选中的背景色
    button{
      background-color: rgb(33, 33, 34);
    }
  }
}
</style>
